<template>
  <uv-popup ref="popup" mode="bottom" round="28" :safeAreaInsetBottom="false">
    <view class="content">
      <view class="agreeBox flex alignCenter justifyCenter" @click="checkboxClick">
        <view style="width: 25px">
          <uv-checkbox-group v-model="checkboxValue" shape="circle" activeColor="#4196A3">
            <uv-checkbox :name="1"></uv-checkbox>
          </uv-checkbox-group>
        </view>
        <view class="agree">
          点击代表您已同意
          <text>《用户协议》</text>
          <text>《隐私政策》</text>
        </view>
      </view>
      <view class="btn">
        <uv-button v-if="checkboxValue.length" shape="circle" :custom-style="wxBtn" :loading="loading" :hair-line="false" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">一键登录</uv-button>
        <uv-button shape="circle" v-else :custom-style="wxBtn" :hair-line="false" @click="toLogin">一键登录</uv-button>
      </view>
    </view>
  </uv-popup>
</template>

<script setup lang="ts">
const instance = getCurrentInstance();
import useCounterStore from "@/stores/counter";
const counter = useCounterStore();
const { proxy } = getCurrentInstance();

let loading = ref(false);
let checkboxValue = ref([]);

let wxBtn = reactive({
  background: "#4196A3",
  color: "#FFFFFF",
  fontSize: "16px",
});

let mobileBtn = reactive({
  background: "#F2F2F2",
  color: "#909090",
  fontSize: "16px",
});

function open() {
  instance.refs.popup.open();
}

function toLogin() {
  proxy.$utils.showToast("请阅读并同意用户协议和隐私协议");
}

let checkboxClick = () => {
  if (checkboxValue.value.length) {
    checkboxValue.value = [];
  } else {
    checkboxValue.value = [1];
  }
};

//获取手机号
async function getPhoneNumber(e) {
  try {
    if (!e.code) return;
    loading.value = true;
    await counter.getPhoneNumber(e.code);
    proxy.$utils.showToast("登录成功");
    instance.refs.popup.close();
  } catch (error) {
    console.log("error", error);
  } finally {
    loading.value = false;
    checkboxValue.value = [];
  }
}

defineExpose({ open });
</script>

<style lang="scss" scoped>
.content {
  padding: 25px 15px 25px 15px;
}
.agreeBox {
  display: flex;
  align-items: baseline;
  justify-content: center;
  margin-bottom: 15px;
}
.agree {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #909090;
  font-size: 11px;
  text {
    color: #4196a3;
  }
}
</style>
